import React,{Component} from 'react';
import './App.css';
import Persons from '../components/Persons/Persons'


class App extends Component {
  // state 用于改变组件内的状态的值
  // props 用于组件通讯的传值
  state = {
    persons:[
      {id:1,name:"lihaowen1",count:50},
      {id:2,name:"lihaowen2",count:51},
      {id:3,name:"lihaowen3",count:52},
    ],
    otherState:"anything",
    showPersons:false
  };
  switchNameHandler = (newname) => {
    // console.log("hello")
    //  不能直接修改state的值
    // this.state.persons[0].name = "xieyao"
    this.setState({
      persons: [
        {name:newname,count:50},
        {name:"lihaowen2",count:51},
        {name:"lihaowen3",count:52},
      ]
    })
  };
  // 双向数据绑定
  namechangedHandler =(event,id) =>{
    // 查找修改对象的下标
    const  personIndex = this.state.persons.findIndex(p =>{
      return p.id === id;
    });
    const person = {
      ...this.state.persons[personIndex]
    };
    // 获取输入内容
    // console.log(event);
    person.name = event.target.value;
    const persons = [...this.state.persons];
    persons[personIndex] = person;
    this.setState({
      persons:persons
    })

    // this.setState({
    //   persons: [
    //     // 当前事件的值
    //     {name:event.target.value,count:50},
    //     {name:"lihaowen2",count:51},
    //     {name:"lihaowen3",count:52},
    //   ]
    // })
  };
  togglePersonsHanler = () => {
    const doesShow =this.state.showPersons;
    this.setState({showPersons:!doesShow})
  };
  deletePersonHandler=(personIndex) =>{
    // const persons = this.state.persons;
    //数组删除下标为personIndex的1个元素
    // 操作运算符，后期添加较为方便
    const persons =[...this.state.persons];
    persons.splice(personIndex,1);
    this.setState({
      persons:persons
    })
  };

  render() {
    const style={
      backgroundColor:'green',
      color:'white',
      font:'inherit',
      border:'1px solid blue',
      padding:'8px',
      cursor:'pointer'
    };

    let persons = null;
    if (this.state.showPersons) {
      persons =<
        Persons persons={this.state.persons}
                clicked={this.deletePersonHandler}
                changed={this.namechangedHandler}
      />;
      style.backgroundColor="red"
    }
    // 动态添加样式
    // const classes = ["red","bold"].join(" "); // join 转字符串
    const classes = [];
    if (this.state.persons.length <= 2) {
      classes.push("red")
    }
    if (this.state.persons.length <= 1) {
      classes.push("bold")
    }


    return (
        <div className="App">
          <h1>hello world</h1>
          <p className={classes.join(" ")}>Hi React App!</p>
          {/*// () => this.switchNameHandler("xieyao") es6 语法，点击才会执行，不使用箭头函数会直接*/}
          {/*<button onClick={() => this.switchNameHandler("xieyao")}>更改状态值</button>*/}
          {/*<button style={style} onClick={this.switchNameHandler.bind(this,"xieyao")}>更改状态值</button>*/}
          <button style={style} onClick={this.togglePersonsHanler}>更改状态值</button>
          {persons}
          {/*{ this.state.showPersons ?*/}
          {/*  <div>*/}
          {/*    <Person*/}
          {/*      changed ={this.namechangedHandler}*/}
          {/*      // 事件传递*/}
          {/*      myclick={this.switchNameHandler.bind(this,"xieyao")}*/}
          {/*      name={this.state.persons[0].name}*/}
          {/*      count={this.state.persons[0].count}/>*/}
          {/*    <Person*/}
          {/*      myclick={this.switchNameHandler.bind(this,"xieyao")}*/}
          {/*      name={this.state.persons[1].name}*/}
          {/*      count={this.state.persons[1].count}/>*/}
          {/*    <Person*/}
          {/*      name={this.state.persons[2].name}*/}
          {/*      count={this.state.persons[2].count}>I am happy!</Person>*/}
          {/*  </div> : null*/}
          {/*}*/}

        </div>
    );
    // return React.createElement('div',{className:'App'},React.createElement('h1',null,'hello world'))
  }
}



export default App;
